<template>
  <div class="city-list">
    <!-- 头部导航栏 -->
    <navbar-comm title="城市列表" class="topNavbar"></navbar-comm>
    <!-- /头部导航栏 -->

    <!----------- 城市列表 ------------->
    <van-index-bar
      :index-list="indexList"
      highlight-color
      :sticky-offset-top="45"
    >
      <!-- 当前城市 -->
      <van-index-anchor index="#">当前城市</van-index-anchor>
      <van-cell :title="curentCity" />
      <!-- 热门城市 -->
      <van-index-anchor index="热">热门城市</van-index-anchor>
      <van-cell
        v-for="(item, index) in hotCity"
        :key="index"
        :title="item.label"
        @click="selectCityFn(item.label)"
      />
      <!-- 所有城市列表 -->
      <div class="city-item" v-for="letter in letters" :key="letter">
        <van-index-anchor :index="letter">{{ letter }}</van-index-anchor>
        <van-cell
          v-for="(item, index) in filterCitys(letter)"
          :key="index"
          :title="item.label"
          @click="selectCityFn(item.label)"
        />
      </div>
    </van-index-bar>
    <!----------- /城市列表 ------------->
  </div>
</template>

<script>
import NavbarComm from '@/components/NavbarComm.vue'
import { getHotCityListApi, getCityListApi, getCityInfoApi } from '@/api/home'
import { mapMutations, mapState } from 'vuex'
// 引入城市列表数据处理函数
export default {
  name: 'cityList',
  components: { NavbarComm },
  props: {},
  data() {
    return {
      hotCity: [],
      allCities: [],
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'Q',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z'
      ],
      letters: [
        'A',
        'B',
        'C',
        'D',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'Q',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z'
      ]
      // currentCity: '上海'
    }
  },
  computed: {
    ...mapState(['curentCityObj']),
    ...mapState(['curentCity']),
    // 辅助函数
    filterCitys() {
      return (letter) => {
        return this.allCities.filter(
          (item) => item.short.substr(0, 1).toUpperCase() === letter
        )
      }
    },
    // 引入vuex中的当前城市变量，并在页面使用
    curentCity() {
      return this.$store.state.curentCity
    }
  },
  watch: {},
  created() {
    this.getCityListFn()
    this.getHotCityListFn()
  },
  methods: {
    // 切换当前城市
    ...mapMutations(['getCurentCityFn']),
    ...mapMutations(['getcurentCityObj']),
    // 获取所有城市列表
    async getCityListFn() {
      const { data } = await getCityListApi(1)
      // console.log(data.body)
      this.allCities = data.body
    },
    // 获取热门城市列表
    async getHotCityListFn() {
      const { data } = await getHotCityListApi()
      // console.log(data.body)
      this.hotCity = data.body
    },
    // 根据城市名称切换当前城市
    async selectCityFn(city) {
      // console.log(city)
      const { data } = await getCityInfoApi(city)
      // console.log(data)
      // console.log(data.body.label)
      if (!(data.body.label === city)) return this.$toast('该城市暂无房源')
      // this.currentCity = city
      this.$router.back()
      this.getCurentCityFn(city)
      // 调用该函数同步vuex里面的curentCityObj
      this.allCities.forEach((item) => {
        if (item.label === city) {
          this.getcurentCityObj(item)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.city-list {
  :deep(.van-index-bar__sidebar) {
    top: 53%;
  }
  :deep(.van-index-bar__index) {
    font-size: 28px;
    margin: 14px 0;
  }
  padding-top: 95px;
  .topNavbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
  }
  :deep(.van-index-anchor) {
    font-size: 28px;
    color: #999;
  }
  :deep(.van-cell__title) {
    font-size: 32px;
  }
  :deep(.van-cell) {
    border-bottom: 1px solid #eee;
    height: 100px;
  }
}
</style>
